<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        class="buttons"
        >导出</el-button
      >
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="所属院系" prop="userName">
          <el-select
            v-model="queryParams.deptId"
            placeholder="请选择"
            clearable
            class="elSelect"
            @change="handleChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
          <!-- <el-cascader
          v-model="queryParams.deptId"
          :options="deptOptions"
          :props="{ value: 'id',currentLabels: 'label',checkStrictly: true}"
          @change="handleChange"
    ></el-cascader> -->
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="remarkList"
            multiple
            placeholder="请选择"
            clearable
            class="elSelect"
            @change="remakArry"
          >
            <el-option
              v-for="dict in dict.type.basic_speciality_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级">
          <el-select
            v-model="gradeNamesList"
            multiple
            placeholder="请选择"
            style="width: 200px"
            clearable
            @change="changeGrade"
          >
            <el-option
              v-for="item in gradeDate"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="query"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="paramsQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      :data="tableData"
      show-summary
      id="schoolScholarshipStatisticsTable"
      style="width: 100%"
    >
      <el-table-column
        prop="deptName"
        label="院系名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-for="item in scholarshipTypeList"
        :key="item.gradeName"
        :label="item.gradeName + '级'"
        align="center"
      >
        <template
          v-if="item.typeSummaryList && item.typeSummaryList.length > 0"
        >
          <el-table-column
            v-for="typeSummaryItem in item.typeSummaryList"
            :key="typeSummaryItem.specialityType + 1"
            :prop="typeSummaryItem.gradeName + typeSummaryItem.specialityType"
            :label="typeSummaryItem.specialityType"
            :show-overflow-tooltip="true"
            align="center"
            :render-header="renderHeader"
          >
          </el-table-column>
          <el-table-column
            v-for="typeSummaryItem in item.typeSummaryList"
            :key="typeSummaryItem.specialityType"
            :prop="
              typeSummaryItem.gradeName +
              typeSummaryItem.specialityType +
              '班级数'
            "
            :label="typeSummaryItem.specialityType + '班级数'"
            :show-overflow-tooltip="true"
            align="center"
            :render-header="renderHeader"
          >
          </el-table-column>
        </template>
      </el-table-column>
      <el-table-column label="分院合计" align="center">
        <el-table-column
          prop="numberTotal"
          label="总人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="classSizeTotal"
          label="班级总个数"
          :show-overflow-tooltip="true"
          align="center"
          :render-header="renderHeader"
        >
        </el-table-column>
        <el-table-column
          prop="bTotal"
          label="男生人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="fTotal"
          label="女生人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="分院毕业班" align="center">
        <el-table-column
          prop="gradeTotal"
          label="总人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="gradeClassTotal"
          label="班级总个数"
          :show-overflow-tooltip="true"
          align="center"
          :render-header="renderHeader"
        >
        </el-table-column>
        <el-table-column
          prop="gradeFTotal"
          label="男生人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="gradeBTotal"
          label="女生人数"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  statisticsSummary,
  statisticsSummaryInfo,
  statSummaryCount,
} from "@/api/information/summary";
import { getGradeSelect } from "@/api/information/gradeInfor";
import exportExecl from "@/utils/exportExecl.js";
import { collegeSelect } from "@/api/information/studentInfor";
export default {
  dicts: ["basic_speciality_type"],
  data() {
    return {
      data: [],
      open: false,
      list: [],
      title: "",
      form: {
        deptId: "",
        remark: "",
        gradeId: "",
      },
      queryParams: {
        deptId: "",
        remark: "",
      },
      remarkList: [],
      gradeNamesList: [],
      deptOptions: [],
      // 获取年级下拉数据
      gradeDate: [],
      newData: [],
      tableData: [],
      scholarshipTypeList: [],
    };
  },
  created() {
    this.getDeptTree();
    this.getlist();
  },
  methods: {
    getlist() {
      statSummaryCount(this.queryParams).then((res) => {
        this.tableData = res.data;

        this.scholarshipTypeList =
          res.data && res.data[0] && res.data[0].gradeSummaryList;
        this.tableData =
          res.data &&
          res.data.map((item) => {
            item.gradeSummaryList.forEach((element) => {
              if (
                element.typeSummaryList &&
                element.typeSummaryList.length > 0
              ) {
                element.typeSummaryList.forEach((typeSummaryItem) => {
                  item[element.gradeName + typeSummaryItem.specialityType] =
                    typeSummaryItem.numberSize;
                  item[
                    element.gradeName +
                      typeSummaryItem.specialityType +
                      "班级数"
                  ] = typeSummaryItem.classSize;
                });
              }
            });
            return item;
          });
        // this.transformData()
        // console.log(this.scholarshipTypeList, this.tableData, "sss");
      });
      //   statisticsSummary(this.queryParams).then(res => {
      //   console.log(res);
      //   this.gradeSummaryList = res.data;
      // });
    },

    renderHeader(h, { column, $index }) {
      // 新建一个span
      let span = document.createElement("span");
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入document
      document.body.appendChild(span);
      // 重点：获取span最小宽度，设置当前列，注意这里加了20，字段较多时还是有挤压，且渲染后的div内左右padding都是10，所以+20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 40;
      // 移除document中临时的span
      document.body.removeChild(span);
      return h("span", column.label);
    },
    // 类型多选
    remakArry(data) {
      this.queryParams.remarks = data.join(",");
      console.log(this.queryParams.remarks);
    },
    // 类型多选
    changeGrade(data) {
      this.queryParams.gradeNames = data.join(",");
      console.log(data);
    },
    /** 导出按钮操作 */
    handleExport() {
      let _studentType = "";
      if (this.schoolScholarshipStudentType == "ben") {
        _studentType = "本科";
      } else if (this.schoolScholarshipStudentType == "zhuan") {
        _studentType = "专科";
      }
      let REPORTID = "schoolScholarshipStatisticsTable";
      let FILENAME = `二级学院学生人数汇总${
        _studentType ? "（" + _studentType + "）" : ""
      }.xlsx`;
      let HEADERRANGE = "A3:M3";
      let l = this.tableData.length;
      let TABLERANGE = `A4:M${3 + l}`;
      let REDRANGE = `A${5 + l}:M${7 + l}`;
      this.$nextTick(() => {
        exportExecl(REPORTID, FILENAME, HEADERRANGE, TABLERANGE, REDRANGE);
      });
    },
    // handleExport() {
    //   this.download(
    //     "/basic/student/statisticsSummary/export",
    //     {},
    //     `学院汇总${new Date().getFullYear()}-${new Date().getMonth() +
    //     1}-${new Date().getDate()}.xlsx`
    //   );
    // },

    handleChange(value) {
      // if (typeof value == "object") {
      //   this.queryParams.deptId = value[value.length - 1];
      // }
    },
    paramsQuery() {
      this.gradeNamesList = [];
      this.remarkList = [];
      this.queryParams.deptId = "";
      this.queryParams.remarks = "";
      this.queryParams.gradeNames = "";
      this.getlist();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      collegeSelect().then((response) => {
        console.log(response);
        this.deptOptions = response.data;
        // this.queryParams.deptId = response.data[0].id;
        this.getGradeInfor();
      });
    },
    query() {
      this.newData = [];
      console.log(this.queryParams, "dfasdfds");
      this.getlist();
    },
    handleView(row) {
      this.getGradeInfor();
      this.title = "二级学院汇总";
      this.open = true;
      this.form = row;
      console.log(this.form, ";fff");
      this.getInforList(this.form);
      // this.list = row.gradeSummaryList;
    },
    // 获取详情数据
    getInforList(data) {
      statisticsSummaryInfo(data).then((res) => {
        this.list = res.data;
      });
    },
    handleQuery() {
      this.getInforList(this.form);
    },
    resetQuery() {
      this.form.gradeId = "";
      this.form.remark = "";
      this.getInforList(this.form);
    },
    getGradeInfor() {
      getGradeSelect(this.queryParams).then((response) => {
        // console.log(response, "Student");
        this.gradeDate = response.data.map((item) => {
          return {
            label: item["TITILE"],
            value: item["VALUE"],
          };
        });
      });
    },
  },
};
</script>

<style scoped>
.buttons {
  display: inline-block;
  float: right;
  text-align: right;
  margin-right: 5%;
}
 /deep/ .el-table {
  overflow-x: auto;
}
/deep/ .el-table__header-wrapper,
/deep/ .el-table__body-wrapper,
/deep/ .el-table__footer-wrapper {
  overflow: visible;
}
/deep/ .el-table::after {
  position: relative;
}
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}
</style>